<template lang="pug">
  .dashboard-side
    ul.dashboard-tabs(v-show="!fullMap && isDevice")
      li
        .btn-style(
          :class="{active:dashboardActive==='map'}"
          @click="dashboardTab('map')") 地图
      li
        .btn-style(
          :class="{active:dashboardActive==='tree'}"
          @click="dashboardTab('tree')") 站点
    DashboardTree.dashboard-tree(
      ref="tree"
      v-if="areaSites.length"
      v-show="dashboardActive==='tree'"
      v-model="devices"
      :treeNodes="areaSites")
    DashboardMap.dashboard-map(
      v-show="dashboardActive==='map'"
      v-model="devices"
      :markers="sites"
      :fullMap="fullMap"
      @openMap="openMap"
      @selectMarker="selectMarker"
      @selectArea="selectArea")
</template>

<script >
/**
 * @name DashboardSide 在线监控侧边栏
 * @author 陈可嘉
 * @description 包含地图和树
 * 只关注地图和树的联动
 * 和外层的数据交互只有选中的设备ID和地图的全屏状态
 */
import { keyBy } from 'lodash'
import DashboardMap from './Map'
import DashboardTree from './Tree'

export default {
  name: 'DashboardSide',
  components: {
    DashboardMap,
    DashboardTree
  },
  props: {
    // 是否地图全屏的状态
    fullMap: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      // 当前活动的页面：地图还是树
      dashboardActive: 'map',
      // 区域和站点的数据
      bizOrg: [],
      // 站点数据，未拼接
      sitesObj: {},
      // 选中的设备ID
      devices: [],
      // 是否选择设备
      isDevice: false
    }
  },
  mounted () {
    this.getSites()
  },
  computed: {
    // 区域的数据和站点的数据合到一起
    areaSites () {
      return this.bizOrg.reduce((result, item) => {
        const site = this.sitesObj[item.siteId]
        const obj = !item.isSite ? [{
          ...item,
          name: item.orgName
        }] : site ? [{
          ...site,
          ...item,
          name: `${site.siteName || '-'}(${site.siteCode || '-'})`
        }] : []
        return [...result, ...obj]
      }, [])
      // return this.bizOrg.map(item => {
      //   console.log(this.sitesObj[item.siteId])
      //   return item.isSite ? {
      //     ...this.sitesObj[item.siteId],
      //     ...item,
      //     name: `${this.sitesObj[item.siteId].siteName || '-'}(${this.sitesObj[item.siteId].siteCode || '-'})`
      //   } : {
      //     ...item,
      //     name: item.orgName
      //   }
      // }).filter(item => {
      //   // 过滤站点树数据，没站点数据的不出现在树
      //   return !item.isSite || !!(item.device)
      // })
    },
    // 把合到一起的数据转成地图点，没在站点树的就不出现在地图
    sites () {
      return this.areaSites.filter(({isSite}) => isSite)
    }
  },
  watch: {
    devices (data) {
      this.$emit('changeDevices', data)
    }
  },
  methods: {
    // 切换树和地图的TAB
    dashboardTab (tab) {
      this.dashboardActive = tab
    },
    // 读取树的数据
    getTreeData () {
      this.$get({
        url: 'pn/base/bizOrganization',
        params: {
          businessId: 'MONITOR'
        }
      }).then(({data}) => {
        this.bizOrg = data
      })
    },
    // 读取站点和设备的数据
    getSites () {
      this.$get({
        url: 'pn/monitor/device/onlineData?deviceName=LUF,DMA,DPAF,PT'
      }).then(({data}) => {
        if (data) {
          this.sitesObj = keyBy(data, 'id')
          this.getTreeData()
        }
      })
    },
    // 设备列表变成单设备
    changeDevices (devices) {
      this.devices = devices
    },
    // 设备列表变成多设备
    joinDevices (device) {
      this.devices.push(device)
    },
    // 通过地图选择设备
    selectMarker (device) {
      this.isDevice = true
      this.changeDevices([device])
      this.$emit('changeFullMap', false)
    },
    // 双击地图时地图全屏
    openMap () {
      this.$emit('changeFullMap', true)
      // 重置站点树搜索关键字
      this.$refs.tree.keyword = ''
    },
    // 单击分区获得分区id
    selectArea (value) {
      this.isDevice = false
      this.$emit('changeAreaId', value)
      this.$emit('changeFullMap', false)
    }
  }
}
</script>

<style lang="sass" scoped>
.dashboard-side
  width: 100%
  flex: 1
  display: flex
  flex-direction: column
.dashboard-tabs
  display: flex
  flex-direction: row
  position: relative
  background: #f5f5f5
  min-height: 42px
  li
    width: 100%
    height: 42px
    line-height: 42px
    text-align: center
    cursor: pointer
    .active
      background: #29a1f7
      color: #fff
.dashboard-tree
  flex: 1
.dashboard-map
  flex: 1
  width: 100%
</style>
